<template>
  <div
  id="pdfDom"
  style="background-color: rgba(249, 249, 252, 1);height: calc(100vh - 45px);overflow: scroll;"
  >
    <div class="top-rule" style="width: 100%;">
      <div class="head"><!--第一行-规则-->
        <div width="200px" class="inner-left"><h4>强规则： </h4></div>
        <div class="inner-right">
          <a-tooltip v-for="(item, k) in items.varRule" placement="bottom">
            <template slot="title">
              <span>{{item.varExplain}}</span>
            </template>
            <a-tag
              v-if="item.varRuleResult === '通过'"
              :key="item.varLabel"
              :var="item.varRuleResult"
              class="item"
              color="#87d068"
            >
              {{ item.varLabel }}
            </a-tag>
            <a-tag
              v-if="item.varRuleResult === '拒绝'"
              :key="item.varLabel"
              :var="item.varRuleResult"
              class="item"
              color="#ff4949"
            >
              {{ item.varLabel }}
            </a-tag>
          </a-tooltip>
        </div>
      </div>
    </div>
    <div style="width: 100%;">
      <div class="inner-pie-img inner">
        <div class="model-score">
          <span class="inner-p-i-title">
            专家模型得分
          </span>
          <!-- <span class="inner-p-i-text" v-html="'-&#12288;专家变量&#12288;-'" />-->
          <div style="margin-top: 80px">
            <div v-for="(item, index) in highRiskVar.split('\n')" :key="item" class="var-total-inner" :class="index ===0?'first':''" style="margin-top: 7px">
              <span v-if="item.length < 2">
                高风险变量数：
                <span style="font-weight: bold">{{ item }}个</span>
              </span>
              <span v-else>
                {{ item }}
              </span>
            </div>
          </div>
        </div>
        <template v-if="typeof this.$route.query.index === 'undefined'">
          <pie-model-score :pie-data="pieData" />
        </template>
        <template v-else>
          <div class="user-scores">
            <span :class="suggest==='自动拒绝'?'height-risk':suggest==='建议人工审核'?'middle-risk':'low-risk'">
              {{ pieData[0] }}分</span>
          </div>
        </template>
      </div>
      <div class="inner-suggest inner">
        <div class="model-score">
          <span class="inner-p-i-title">
            决策建议
          </span>
          <span style="margin-top: 80px;display: block;">
            强规则变量：
            <span style="font-weight: bold">{{ varRuleLength }}个</span>
          </span>
        </div>
        <div class="inner-p-i-suggest">
          <span class="inner-p-i-title inner-p-i-t-s" :class="suggest==='建议拒绝'?'height-risk':suggest==='建议人工审核'?'middle-risk':'low-risk'">{{ suggest }}</span>
        </div>
      </div>
    </div>
    <div class="inner-bar-table">
      <div :class="typeof this.$route.query.index !== 'undefined' ?'inner-table-hash inner': 'inner-table inner'">
        <a-table
                ref="tableList"
                size="middle"
                :key="tableKey"
                rowKey="id"
                :columns="columns"
                :data-source="barData"
                bordered
                :pagination="false"
                :rowClassName="columnStyle"
        >
          <!-- 序号 -->
          <span slot="serial" slot-scope="text, record, index">{{ index<10-1? 0:'' }}{{ index + 1 }}</span>
          <template slot="varLabel" slot-scope="text, row, index">
            <a-tooltip v-if="row.varLabel !== '性别婚姻状况' && row.varLabel !== '学历'" placement="right">
              <div slot="title">
                变量名：
                <span v-if="row.varUnit === null || row.varUnit === 'null'">{{ row.varLabel }}</span>
                <span v-else>{{ row.varLabel }}</span>
                <br>
                <span v-html=" '解&#12288;释：'" />{{ row.businessExplanation }}
              </div>
              <span v-if="row.varUnit === null || row.varUnit === 'null'" class="tr-span" style="cursor: pointer;white-space:nowrap;">{{ row.varLabel }}</span>
              <span v-else class="tr-span" style="cursor: pointer;white-space:nowrap;">{{ row.varLabel }}({{ row.varUnit }})</span>
            </a-tooltip>
            <span v-else class="tr-span">{{ row.varLabel }}</span>
          </template>
          <template slot="varVal" slot-scope="text, row, index">
            <span v-if="typeof row.comment!=='undefined' && row.comment !== null">{{ row.comment }}</span>
            <span v-else-if="row.varLabel.indexOf('比') !== -1 || row.varLabel.indexOf('率') !== -1" class="tr-span">{{ (row.varVal*100).toFixed(2) + '%' }} </span>
            <span v-else class="tr-span">{{ row.varVal }}</span>
          </template>
          <template slot="label1" slot-scope="text, row, index">
            <span :class="row.label==='高风险'?'height-risk tr-span':row.label==='中风险'?'middle-risk tr-span':'low-risk tr-span'">{{ row.label1 }}</span>
          </template>
        </a-table>
      </div>
      <div v-if="typeof this.$route.query.index === 'undefined'" class="inner-bar">
        <bar-model-score :bar-data="barData" />
      </div>
    </div>
  </div>
</template>

<script>
import PieModelScore from '@/components/charts/PieModelScore'
import BarModelScore from '@/components/charts/BarModelScore'
import { fetchVarRuleList } from '@/axios/credit-data'
import {fetchModelResultVarList} from "@/axios/credit-data";
export default {
  name: 'ExpertScorecard',
  components: { PieModelScore, BarModelScore },
  props: {
    reportNo: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      label: '',
      items: [],
      htmlTitle: '辅助决策',
      varRuleLength: '',
      pieData:[],
      barData:[],
      suggest:'',
      highRiskVar:'',
      tableKey:0,
      columns:[
        {
          title: '#',
          dataIndex: 'id',
          scopedSlots: { customRender: 'serial' },
          width: 50,
          align:'center'
        },
        {
          title: '变量名',
          dataIndex: 'varLabel',
          scopedSlots: { customRender: 'varLabel' },
          align:'left',
          ellipsis: true,
        },
        {
          title: '取值',
          dataIndex: 'varVal',
          scopedSlots: { customRender: 'varVal' },
          width: 140,
          align:'center',
          ellipsis: true,
        },
        {
          title: '得分',
          dataIndex: 'varScore',
          scopedSlots: { customRender: 'varScore' },
          width: 60,
          align:'center',
          ellipsis: true,
        },
        {
          title: '风险',
          dataIndex: 'label1',
          scopedSlots: { customRender: 'label1' },
          width: 60,
          align:'center',
          ellipsis: true,
        },
      ]

    }
  },
  created() {
    this.getData()
    this.getVarRuleData()
  },
  methods: {
    columnStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1 || columnIndex === 2) {
        return 'text-indent: 1em !important;'
      }
    },
    getData() {
      const query = {
        reportNo: this.reportNo
      }
      fetchModelResultVarList(query).then((res) => {
        this.pieData.push(res.data.score)
        const s = res.data.totalScore - res.data.score
        this.pieData.push(s)
        this.suggest = res.data.suggest
        this.barData = res.data.items
        const highRiskVar = res.data.highRiskVar
        if (typeof highRiskVar !== 'undefined' && highRiskVar != null && highRiskVar.indexOf('占比') !== -1) {
          var reg = new RegExp('；', 'g')
          const data = highRiskVar.replace(reg, '').split('\n')
          const share = data[data.length - 1].split(':')[1]
          data.pop()
          data[1] = data[1] + ' (' + share + ')'
          this.highRiskVar = data.join('\n')
        } else {
          this.highRiskVar = highRiskVar
        }
      }).catch()
    },
    getVarRuleData() {
      const query = {
        reportNo: this.reportNo
      }
      fetchVarRuleList(query).then((res) => {
        this.items = res.data
        console.log(this.items,'it')
        this.varRuleLength = this.items.varRule.length
      }).catch()
    },
    randomKey(e) {
      return new Date().getTime() + '_1' + e + Math.round(Math.random() * 1000)
    }
  }
}
</script>

<style scoped lang="less">
  .top-rule {
    position: relative;
  }
  .head{
    padding: 0px 20px;
    height: 60px;
    box-sizing: border-box;
    flex-shrink: 0;
    .inner-left {
      margin-left: 50px;
      position: absolute;
    }
    .inner-left h4{
      display: block;
      margin-block-start: 1.33em;
      margin-block-end: 1.33em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
      font-weight: bold;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      font-size: 18px;
      font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
    }
    .inner-right {
      position: absolute;
      margin-left:100px;
      left: 30px;
      display: block;
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      -ms-flex-preferred-size: auto;
      flex-basis: auto;
      overflow: auto;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      padding: 20px;
    }
  }
  .model-score {
    position: absolute;
    z-index: 999;
  }
  .app-container-inner {
    background-color: rgba(249, 249, 252, 1);
  }
  .inner{
    width: 45%;
    background: white;
    display: inline-block;
    margin-left: 3.3%;;
    margin-top: 15px;
    box-shadow: 0 0 15px rgba(159, 166, 206, 0.2);
    border: none;
    border-radius: 8px;
  }
  .model-score {
    margin: 30px 0 0 50px;
  }
  .inner-p-i-title {
    font-size: 20px;
    display: block;
    font-weight: 800;
    margin-bottom: 10px;
    font-family: Microsoft YaHei, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Arial, sans-serif;
  }
  .inner-p-i-text {
    font-size: 16px;
    color: #232323cc;
    font-family: Microsoft YaHei, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Arial, sans-serif;
  }
  .inner-suggest {
    height: 200px;
    position: relative;
  }
  .item{
    margin-right:10px;
    padding: 5px 10px;
    font-size: 13px;
  }
  .inner-p-i-suggest {
    position: absolute;
    right: 40px;
    top: 70px;
  }
  .inner-p-i-t-s {
    font-size: 36px;
    letter-spacing: 15px;
    color: #C03639;
  }
  .inner-bar-table {
    margin-top: 10px;
    margin-bottom: 10px;
    position: relative;
  }
  .inner-table {
    height: 705px;
    background-color: rgba(249, 249, 252, 1);
    position: absolute;
  }
  .inner-table-hash {
    height: 705px;
    background-color: rgba(249, 249, 252, 1);
    width: 93.3%;
  }
  .inner-bar {
    width: 45%;
    margin-left: 3.3%;;
    background: white;
    display: inline-block;
    box-shadow: 0 0 15px rgba(159, 166, 206, 0.2);
    border: none;
    border-radius: 8px;
    position: relative;
    left: 48.3%;
    margin-top: 15px;
  }
  .height-risk {
    color: #f84343 !important;
  }
  .middle-risk {
    color: #ff9900 !important;
  }
  .low-risk {
    color: #00b9ff !important;
  }
  .tr-span{
    font-size: 14px !important;
  }
  .var-total-inner {
    font-family: Microsoft YaHei, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Arial, sans-serif;
    font-size: 15px;
  }
  .first{
    margin-top: 20px;
  }
  .user-scores{
    height: 200px;
    width: 50%;
    left: 50%;
    top: 37%;
    font-size: 40px;
    font-weight: 600;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    position: absolute;
    font-family: Microsoft YaHei, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Arial, sans-serif;
  }
  .inner-pie-img {
    position: relative;
    height: 200px;
  }
  //修改表头文字、背景颜色
  /deep/.ant-table-header >table{
    border: none !important;
  }
  /deep/.ant-table-body > table{
    font-size: 0.875rem !important;
    font-family: 'Noto Sans SC','Noto Sans',"SimSun","宋体", 'AvenirNext',Helvetica,Arial,sans-serif !important;
    border: none !important;
    a{
      color: #000;
      text-decoration: underline;
    }
    tr>td:last-child{
      border-right: none !important;/* # */
    }
    tr:last-child{
      td{
        border-bottom: none !important;/* # */
      }
    }
    tr:hover td{
      background: #f2f4f6 !important;
    }
  }
  /deep/.ant-table-thead > tr{
    > th {
      font-weight: 700 !important;
      background: #eef1f6 !important;
      color: #606266;
      text-align: center !important;
    }
    th:last-child{
      border-right:none !important;/* # */
    }
  }
</style>
